<script setup>
import { getFileDataList, getFileResultDataList } from '@/api/subject/subject'
import ChartsDlg from './ChartsDlg'
const { proxy } = getCurrentInstance()
const dialogVisible = ref(false)
const fileDataList = ref([])
const fileResultDataList = ref([])
const loading = ref(true)
const total = ref(0)
const tableHeader = ref([])
const tableResultHeader = ref([])
const dictMap = ref(null)
const form = reactive({
  drawType: 'manual',
  xAxis: '',
  chartType: 'line',
  yAxis: [],
  groupKey: '',
  groupYAxis: ''
})
const { sys_pneumatic_column } = proxy.useDict('sys_pneumatic_column')
const rules = reactive({
  drawType: [
    { required: true, message: '请选择绘制类型', trigger: 'change' }
  ],
  chartType: [
    { required: true, message: '请选择图表类型', trigger: 'change' }
  ],
  xAxis: [
    { required: true, message: '请选择X轴坐标参数', trigger: 'change' }
  ],
  yAxis: [
    {
      type: 'array',
      required: true,
      message: '请选择Y轴坐标参数',
      trigger: 'change'
    }
  ],
  groupKey: [
    { required: true, message: '请选择分组参数', trigger: 'change' }
  ],
  groupYAxis: [
    { required: true, message: '请选择Y轴坐标参数', trigger: 'change' }
  ]
})
const show = (row) => {
  getList(row.id)
  dialogVisible.value = true
}
const getList = (fileId) => {
  const params = {
    fileId
  }
  getFileDataList(params).then(response => {
    fileDataList.value = transformData(response.rows)
    tableHeader.value = getTableHeader(fileDataList.value)
    total.value = response.total
    loading.value = false
  })
  getFileResultDataList(params).then(response => {
    console.log(response)
    if (response.rows.length) {
      fileResultDataList.value = transformData(response.rows)
      tableResultHeader.value = getTableHeader(fileResultDataList.value)
    }
  })
}
const transformData = (data) => {
  const tableData = {}

  data.forEach(item => {
    const rowIndex = item.rowIndex

    // 如果tableData中还没有这个rowIndex的对象，就初始化一个新的
    if (!tableData[rowIndex]) {
      tableData[rowIndex] = {}
    }
    // 把pneumaticKey和pneumaticValue添加到对应的行对象中
    tableData[rowIndex][item.pneumaticKey] = item.pneumaticValue
  })

  // 将tableData转换为数组格式
  return Object.values(tableData)
}
const getTableHeader = (data) => {
  const header = []
  const map = sys_pneumatic_column.value.reduce((acc, item) => {
    acc.set(item.value, item.label)
    return acc
  }, new Map())
  dictMap.value = map
  if (data.length) {
    for (const key in data[0]) {
      header.push({
        label: map.get(key),
        prop: key
      })
    }
  }
  return header
}
const handleDraw = () => {
  proxy.$refs.drawForm.validate(valid => {
    if (valid) {
      proxy.$refs.chartDlg.show(fileDataList.value, form, dictMap.value)
    }
  })
}
const reset = () => {
  proxy.resetForm('drawForm')
}
defineExpose({
  show
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="数据查看"
    width="1200"
    @close="reset"
    draggable
    overflow
  >
    <el-table
      :data="fileDataList"
      border
      style="width: 100%"
    >
      <el-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      />
    </el-table>
    <el-divider content-position="left">
      <el-text
        class="mx-1"
        type="primary"
        size="large"
      >
        最终结果
      </el-text>
    </el-divider>

    <el-table
      :data="fileResultDataList"
      border
      style="width: 100%"
    >
      <el-table-column
        v-for="(item, index) in tableResultHeader"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      />
    </el-table>
    <el-divider content-position="left">
      <el-text
        class="mx-1"
        type="primary"
        size="large"
      >
        绘制区域
      </el-text>
    </el-divider>
    <!--绘图区域-->
    <div class="draw-form-container">
      <el-form
        :model="form"
        ref="drawForm"
        label-width="auto"
        style="min-width: 600px"
        :rules="rules"
      >
        <el-form-item
          label="绘图方式"
          prop="drawType"
        >
          <el-radio-group v-model="form.drawType">
            <el-radio value="manual">
              手动选择
            </el-radio>
            <el-radio value="group">
              分组绘图
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="图表类型"
          prop="chartType"
        >
          <el-radio-group v-model="form.chartType">
            <el-radio value="line">
              折线图
            </el-radio>
            <el-radio value="bar">
              柱状图
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="分组参数"
          prop="groupKey"

          v-if="form.drawType === 'group'"
        >
          <el-radio-group v-model="form.groupKey">
            <el-radio
              v-for="(item, index) in tableHeader"
              :key="index"
              :value="item.prop"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="X轴参数"
          prop="xAxis"
        >
          <el-radio-group v-model="form.xAxis">
            <el-radio
              v-for="(item, index) in tableHeader"
              :key="index"
              :value="item.prop"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="Y轴参数"
          prop="yAxis"
          v-if="form.drawType === 'manual'"
        >
          <el-checkbox-group

            v-model="form.yAxis"
          >
            <el-checkbox
              v-for="(item, index) in tableHeader"
              :key="index"
              :value="item.prop"
              :label="item.label"
            />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          v-else
          label="Y轴参数"
          prop="groupYAxis"
        >
          <el-radio-group

            v-model="form.groupYAxis"
          >
            <el-radio
              v-for="(item, index) in tableHeader"
              :key="index"
              :value="item.prop"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="handleDraw"
        >
          绘图
        </el-button>
      </div>
    </template>
    <ChartsDlg ref="chartDlg" />
  </el-dialog>
</template>

<style scoped lang="scss">
.draw-form-container {
  margin-top: 16px;
}
</style>
